@extends('admin.frame_layout')
<?php $top_selected = "工作台";$page_menu = "会员统计" ?>

@section('content')
    <div class="mainbox">
        <div class="mainleft">
            <div class="leftinfo">
                <div class="listtitle"><a href="#" class="more1">报表</a>系统会员注册/激活 - 数据统计（7天）</div>
                <div id="activate" style="width: 100%;height: 250px;"></div>
            </div>

            <div class="leftinfo" style="margin-top: 10px;">
                <div class="listtitle"><a href="#" class="more1">报表</a>会员活跃情况 - 数据统计（7天）</div>
                <div id="login" style="width: 100%;height: 250px;"></div>
            </div>
        </div>

        <div class="mainright">
            <div class="dflist">
                <div class="listtitle">会员占比</div>
                <div id="user-vip" style="width: 100%;height: 250px;"></div>
            </div>

            <div class="dflist" style="margin-top: 10px;">
                <div class="listtitle">会员数字信息统计</div>
                <ul class="newlist">
                    <li>
                        <i>已激活会员：</i>
                        <b>{{empty($okUsers)?0:$okUsers}}(人)</b>
                    </li>
                    <li>
                        <i>未激活会员：</i>
                        <b>{{empty($noOkUsers)?0:$noOkUsers}}(人)</b>
                    </li>
                    <li>
                        <i>报单中心：</i>
                        <b>{{empty($bdzxUsers)?0:$bdzxUsers}}(人)</b>
                    </li>
                    <li>
                        <i>内部会员：</i>
                        <b>{{empty($inUsers)?0:$inUsers}}(人)</b>
                    </li>
                    <li>
                        <i>总计会员：</i>
                        <b>{{empty($sumUsers)?0:$sumUsers}}(人)</b>
                    </li>
                </ul>
            </div>
        </div>
    </div>

@endsection

@section('footer')
    <script src="{{asset('admin/js/echarts.min.js')}}"></script>

    {{--用户注册/激活统计图--}}
    <script type="text/javascript">
        var actChart = echarts.init(document.getElementById('activate'));
        var actOption = null;
        var loginChart = echarts.init(document.getElementById('login'));
        var loginOption = null;
        var vipChart = echarts.init(document.getElementById('user-vip'));
        var vipOption = null;

        var date = JSON.parse('{!!  $dates !!}');
        var regUserNum = JSON.parse('{!!  $regUserNums !!}');
        var okUserNum = JSON.parse('{!!  $okUserNums !!}');
        var loginUserNum = JSON.parse('{!!  $loginUserNums !!}');

        var vipData = JSON.parse('{!! $vipData !!}');

        $(function () {
            actOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['当天注册', '当天激活']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: date
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '当天注册',
                        type: 'bar',
                        data: regUserNum
                    },
                    {
                        name: '当天激活',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 35,
                        data: okUserNum
                    }
                ]
            };
            actChart.setOption(actOption);

            loginOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['会员登录7天统计']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: date
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '会员登录7天统计',
                        type: 'line',
                        stack: '总量',
//                        areaStyle: {normal: {}},
                        data: loginUserNum
                    }
                ]
            };
            loginChart.setOption(loginOption);

            vipOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
//                    data: ['普通会员', '铜卡会员', '银卡会员', '金卡会员', '钻卡会员']
                },
                series: [
                    {
                        name: '会员种类占比',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'outside'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: vipData
                    }
                ]
            };
            vipChart.setOption(vipOption);

            $(window).resize(function () {
                reSize();
            });
            reSize();   //让Echart重绘自身图表的宽高
        });

        //图表随着窗口大小改变而进行重绘
        function reSize() {
            if (actChart != null) {
                actChart.resize();
            }
            if (loginChart != null) {
                loginChart.resize();
            }
            if (vipChart != null) {
                vipChart.resize();
            }
        }
    </script>
@endsection